<template>
  <section class="f-meal-search-box">
    <section class="f-meal-search" v-show="!isSearch">
      <section class="f-header">
        <img class="f-close-img" src="@/assets/icons/login_icon_close_white.png" alt="" @click="goBack()">
        <div>
          <van-button round style="width: 65px;height: 32px;" @click="clearSearch()">清空</van-button>
          <van-button round style="width: 65px;height: 32px;margin-left: 15px;" v-show="!isSearch" @click="handleSearch()">
            <span style="color:#485FD0">查询</span>
          </van-button>
        </div>
      </section>

      <ul class="f-accordion">
        <li class="f-accordion-item">
          <section class="f-accordion-title" @click="clickTitle(0,[1,2])">
            <p style="width: 50px;">地点</p>
            <div class="f-accordion-title-img">
              <img v-for="(item,index) in countrySelected" :key="index" :src="host+item.image" alt="">
            </div>
            <img class="f-ml-05" style="width: 7px;" src="@/assets/icons/more_btn_enter.png" alt="">
          </section>
          <section class="f-accordion-content">
            <p class="f-title">要去哪里？</p>
            <div class="f-selected">
              <p class="f-mr-10" style="width: 50px;">已选({{ countrySelected.length }}):</p>
              <div style="flex:1">
                <img v-for="(item,index) in countrySelected" :key="index" :src="host+item.image" alt="">
              </div>
            </div>
            <van-search v-model="searchForm.value" shape="round" placeholder="搜索目的地" background="#DEE2F0" style="height: 43px;"
              @search="onSearch" @blur="onSearch" />
            <section class="f-content">
              <ul class="f-sidebar">
                <li v-for="(item,index) in continentList" :key="index"
                  :class="{'f-sidebar-active': item.continentCode == continentCode}" @click="setContinent(item)">
                  {{ item.continentDesc }}</li>
              </ul>
              <ul class="f-country">
                <li v-for="(item,index) in countryList" :key="index" @click="handleCountry(item)">
                  <img class="f-country-img" :src="host+item.image" alt="">
                  <p>{{ item.countryDesc }}</p>
                  <img v-if="item.select" class="f-country-img-s" src="@/assets/icons/sesearch_btn_check.png" alt="">
                </li>
              </ul>
            </section>
          </section>
        </li>
        <li class="f-accordion-item">
          <section class="f-accordion-title" @click="clickTitle(1,[0,2])">
            <p>时间</p>
            <p>{{ daySelected.name }}
              <img class="f-ml-05" style="width: 7px;" src="@/assets/icons/more_btn_enter.png" alt="">
            </p>
          </section>
          <section class="f-accordion-content">
            <p class="f-title">使用天数</p>
            <ul class="f-days">
              <li v-for="(item,index) in dayList" :key="index" :class="{'f-select': daySelected.value == item.value}"
                @click="handleDay(item)">{{ item.name }}</li>
            </ul>
            <van-search v-model="period" shape="round" placeholder="请输入使用天数" background="#DEE2F0" left-icon @input="handlePeriod"
              @blur="handlePeriod" style="height: 43px;">
              <template #right-icon>
                <span style="color: #000000;padding-right: 5px;">天</span>
              </template>
            </van-search>
            <p style="height: 43px;"></p>
          </section>
        </li>
        <li class="f-accordion-item">
          <section class="f-accordion-title" @click="clickTitle(2,[0,1])">
            <p>流量</p>
            <p>{{ internetTraffic.name }}
              <img class="f-ml-05" style="width: 7px;" src="@/assets/icons/more_btn_enter.png" alt="">
            </p>
          </section>
          <section class="f-accordion-content">
            <p class="f-title">所需日流量</p>
            <ul class="f-internet-traffic">
              <li v-for="(item,index) in internetTrafficList" :key="index"
                :class="{'f-select': internetTraffic.value == item.value}" @click="handleInternetTraffic(item)">{{ item.name }}
              </li>
            </ul>
            <van-search v-model="trafficDay" shape="round" placeholder="请输入所需日流量" background="#DEE2F0" left-icon
              @input="handleTrafficDay" @blur="handleTrafficDay" style="height: 43px;">
              <template #right-icon>
                <span style="color: #000000;padding-right: 5px;">MB</span>
              </template>
            </van-search>
            <p style="height: 43px;"></p>
          </section>
        </li>
      </ul>
    </section>

    <section class="f-meal-search-show" v-show="isSearch">
      <section class="f-header">
        <img class="f-arrow" src="@/assets/icons/arrow_left.png" alt="" @click="goBack()">
        <section class="f-search-box" @click="isSearch = false">
          <p>
            <span v-for="(item,index) in countrySelected" :key="index">
              {{ item.countryDesc }}
              <span v-show="index +1 != countrySelected.length">,</span>
            </span>
            <span v-if="!countrySelected.length">{{ continentDesc[continentCode] }}</span>
          </p>
          <div>
            <p>天数: {{ daySelected.value || '不限'}}<span v-show="daySelected.value">天</span></p>
            <p>流量: {{ internetTraffic.value || '全部' }}<span v-show="internetTraffic.value">MB</span></p>
          </div>
        </section>
      </section>
      <ul class="f-goods-box">
        <li v-for="(item,index) in tableData" :key="index" @click="toDetail(item)">
          <img :src="item.image? item.image: defaultMealImg" alt="">
          <div class="f-text-box">
            <p class="f-name">{{item.packageName}}</p>
            <p class="f-mark">{{item.remark}}</p>
            <p class="f-price">CNY {{ (item.price/10/10).toFixed(2) }}</p>
          </div>
        </li>
      </ul>
      <p v-if="!tableData.length" class="f-center" style="color:#fff">暂无套餐</p>
    </section>
  </section>
</template>
  
<script>
import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from './api';
import { errorDeal, getStore, setStore } from '@/utils/utils';

export default {
  name: 'mealSearch',
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      isSearch: false,
      searchForm: {},
      continentList: [],

      host: '',
      continentCode: '',
      countryList: [],
      countrySelected: [],
      continentDesc: {
        'Asia': '亚洲',
        'Europe': '欧洲',
        'Africa': '非洲',
        'America': '美洲',
        'Australia': '大洋洲',
      },

      dayList: [
        { name: '1天', value: 1 },
        { name: '3天', value: 3 },
        { name: '7天', value: 7 },
        { name: '15天', value: 15 },
        { name: '30天', value: 30 },
      ],
      daySelected: {},

      internetTrafficList: [
        { name: '全部', value: '' },
        { name: '500MB', value: 500 },
        { name: '1GB', value: 1 * 1024 },
      ],
      internetTraffic: {},

      allCountry: [],

      tableData: [],

      period: '',
      trafficDay: '',

      defaultMealImg: require('@/assets/imgs/pic_package_default.png'),
    })

    onMounted(() => {
      getYklContinent()
    })

    // 获取国家
    const getYklContinent = () => {
      let json = {
        continentCode: ''
      }
      api.yklContinent(json).then(res => {
        state.continentList = res.data
        setContinent(res.data[0])
        nextTick(() => {
          clickTitle(0, [1, 2])
        })

        state.continentList.forEach(item => {
          state.allCountry.push(...item.countryOptions)
        })
      })
    }

    const setContinent = (data) => {
      state.continentCode = data.continentCode
      state.host = data.host
      state.countryList = data.countryOptions
    }

    const clickTitle = (index, list) => {
      let item = document.querySelectorAll('.f-accordion-item')[index]
      const title = item.querySelector('.f-accordion-title');
      const content = item.querySelector('.f-accordion-content');

      title.style.display = 'none'

      const isActive = item.classList.contains('active');

      // 关闭所有项目
      list.forEach(otherItem => {
        let otherDom = document.querySelectorAll('.f-accordion-item')[otherItem]
        otherDom.classList.remove('active');
        otherDom.querySelector('.f-accordion-title').style.display = 'flex'
        otherDom.querySelector('.f-accordion-content').style.maxHeight = null;
      })


      // 切换当前项目
      if (!isActive) {
        item.classList.add('active');
        content.style.maxHeight = content.scrollHeight + 'px';
      }
    }

    // 选择国家
    const handleCountry = (data) => {
      data.select = data.select ? false : true
      if (state.countrySelected.length) {
        let findIndex = state.countrySelected.findIndex(item => item.countryCode == data.countryCode)
        if (findIndex > -1) {
          state.countrySelected.splice(findIndex, 1)
        } else {
          state.countrySelected.push(data)
        }
      } else {
        state.countrySelected.push(data)
      }
    }

    // 选择天数
    const handleDay = (data) => {
      data.select = data.select ? false : true
      state.daySelected = data
      state.period = data.value
    }

    // 选择流量
    const handleInternetTraffic = (data) => {
      data.select = data.select ? false : true
      state.internetTraffic = data
      state.trafficDay = data.value
    }

    const goBack = () => {
      router.go(-1)
    }

    const clearSearch = () => {
      getYklContinent()
      state.countrySelected = []
      state.daySelected = {}
      state.internetTraffic = {}
      state.isSearch = false
      state.period = ''
      state.trafficDay = ''
      state.allCountry = []
      state.searchForm = {}
    }

    const handleSearch = () => {
      let json = {
        "continentCode": "",
        "countryCodes": [],
        "orderBy": "",
        "page": 1,
        "period": state.daySelected.value,
        "serverEnum": null,
        "size": 100,
        "trafficDay": state.internetTraffic.value,
        "trafficEnd": "",
        "trafficStart": "",
        "typeEnum": null
      }
      if (!state.countrySelected.length) {
        json.continentCode = state.continentCode
      }

      state.countrySelected.forEach(item => [
        json.countryCodes.push(item.countryCode)
      ])

      api.yklPackListMore(json).then(res => {
        state.isSearch = true
        state.tableData = res.data.list
      })
    }

    const toDetail = (data) => {
      router.push({
        path: '/outChinaMeal/detail',
        query: {
          packId: data.packageId
        }
      })

      addCacheRoute()
    }

    const addCacheRoute = () => {
      store.commit("addCacheRoute", 'mealSearch');
    }

    const onSearch = () => {
      if (!state.searchForm.value) return
      state.continentCode = ''
      state.countryList = []
      state.allCountry.forEach(item => {
        if (item.countryDesc.includes(state.searchForm.value)) {
          state.countryList.push(item)
        } else {
          // console.log("未找到匹配项");
        }
      })
    }

    const handlePeriod = () => {
      let json = {
        name: `${state.period}天`,
        value: state.period
      }
      state.daySelected = json
    }

    const handleTrafficDay = () => {
      let json = {
        name: `${state.trafficDay}GB`,
        value: state.trafficDay
      }
      state.internetTraffic = json
    }

    return {
      ...toRefs(state),
      clickTitle,
      handleCountry,
      handleDay,
      handleInternetTraffic,
      goBack,
      clearSearch,
      handleSearch,
      setContinent,
      toDetail,
      onSearch,
      handlePeriod,
      handleTrafficDay,
    }
  }
}
</script>
  
<style lang="scss" scoped>
.f-meal-search-box {
  .f-meal-search {
    background: #6670ad !important;
    padding: 51px 17px 41px 17px;
    height: 100%;
    .f-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      .f-close-img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
    }
    .f-accordion {
      .f-accordion-item {
        margin-bottom: 20px;
        .f-accordion-title {
          width: 341px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 17px;
          font-weight: 400;
          font-size: 14px;
          color: #424242;
          padding: 26px 10px 26px 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .f-accordion-title-img {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            align-items: center;
            justify-content: right;
            gap: 7px;
            img {
              width: 43px;
              height: 29px;
              border: 1px solid #aaa;
            }
          }
        }
        .f-accordion-content {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
          width: 341px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 17px;
          .f-title {
            font-weight: 400;
            font-size: 24px;
            color: #000000;
            padding-left: 16px;
            padding-top: 20px;
          }
          .f-selected {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 12px;
            color: #424242;
            padding-left: 19px;
            margin-top: 15px;
            margin-bottom: 12px;
            min-height: 33px;
            img {
              border: 1px solid;
              width: 43px;
              height: 29px;
              margin-right: 7px;
            }
          }
          .f-content {
            display: flex;
            margin-top: 16px;
            .f-sidebar {
              width: 76px;
              background: #fff;
              color: #000000;
              margin-right: 11px;
              li {
                width: 100%;
                height: 48px;
                line-height: 48px;
                text-align: center;
                font-size: 13px;
              }
            }
            .f-sidebar-active {
              background: #485fd0;
              color: #fff;
            }
            .f-country {
              flex: 1;
              display: flex;
              flex-wrap: wrap;
              gap: 13px 11px;
              max-height: 235px;
              overflow: auto;
              li {
                width: 52px;
                height: 57px;
                background: #ffffff;
                border: 1px solid #aaaaaa;
                font-size: 9px;
                color: #000000;
                text-align: center;
                position: relative;
                .f-country-img {
                  width: 43px;
                  height: 28px;
                  border: 1px solid #e3e3e3;
                  margin-top: 3px;
                  margin-bottom: 5px;
                }
                .f-country-img-s {
                  width: 17px;
                  height: 17px;
                  position: absolute;
                  bottom: 0;
                  right: 0;
                }
              }
            }
          }
          .f-days {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px 9px;
            margin: 21px 10px 21px 18px;
            li {
              width: 55px;
              height: 28px;
              background: #ffffff;
              border-radius: 14px;
              border: 1px solid #aaaaaa;
              text-align: center;
              line-height: 28px;
              font-weight: 400;
              font-size: 12px;
              color: #000000;
            }
            .f-select {
              border: 1px solid #485fd0;
              color: #485fd0;
            }
          }
          .f-internet-traffic {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px 10px;
            margin: 21px 10px 21px 18px;
            li {
              width: 69px;
              height: 40px;
              background: #ffffff;
              border-radius: 20px;
              border: 1px solid #aaaaaa;
              text-align: center;
              line-height: 40px;
              font-weight: 400;
              font-size: 14px;
              color: #000000;
            }
            .f-select {
              border: 1px solid #485fd0;
              color: #485fd0;
            }
          }
        }
      }
    }
  }
  .f-meal-search-show {
    height: 100%;
    display: flex;
    flex-direction: column;
    .f-header {
      background-image: url("@/assets/imgs/title_bg.jpg");
      display: flex;
      align-items: center;
      padding: 50px 20px 24px 20px;
      .f-arrow {
        width: 10px;
        margin-right: 20px;
      }
      .f-search-box {
        // width: 341px;
        flex: 1;
        background: #ffffff;
        border-radius: 17px;
        border: 1px solid #6717cd;
        padding-left: 15px;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        padding: 15px 20px 10px 15px;
        overflow-x: hidden;
        div {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #666666;
          margin-top: 8px;
          p {
            width: 50%;
          }
        }
      }
    }
    .f-goods-box {
      flex: 1;
      overflow-y: auto;
      padding: 10px 17px 41px 17px;

      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
      // gap: 10px 0px;

      column-count: 2;
      column-fill: balance;
      column-gap: 20px;
      li {
        width: 166px;
        border-radius: 7px;
        background: #fff;
        break-inside: avoid;
        margin-bottom: 10px;
        img {
          width: 100%;
          border-radius: 7px;
        }
        .f-text-box {
          padding: 10px;
          .f-name {
            font-size: 14px;
            margin-left: 2px;
          }
          .f-mark {
            display: inline-block;
            background: #f3f3f3;
            color: #757575;
            padding: 2px 5px;
            font-size: 10px;
            margin: 10px 0;
            border-radius: 3px;
          }
          .f-price {
            font-size: 14px;
            font-weight: 550;
            color: #ff4b48;
            margin-left: 2px;
          }
        }
      }
      li:nth-child(2n) {
        // margin-left: 14px;
      }
    }
  }
}
</style>

<style lang="scss" >
.f-meal-search {
  .van-search__content {
    background: #fff !important;
  }
  .van-search__content--round {
    border-radius: 13px !important;
    border: 1px solid #666666;
  }
}
</style>